<!--
 * @Autor: Ruohong Yu
 * @Date: 2022-09-11 17:21:59
 * @Description: file content
 * @FilePath: \ebook\src\views\store\StoreHome.vue
-->
<template>
  <div class="store-home" ref="storehome">
    <search-bar></search-bar>
    <flap-card :data="random"></flap-card>
    <scroll :top="scrollTop" @onScroll="onScroll" ref="scroll">
      <div class="banner-wrapper">
        <div class="banner-img" :style="{backgroundImage:`url('${banner}')`}"></div>
      </div>
      <guess-you-like :data="guessYouLike"></guess-you-like>
      <recommend class="recommend" :data="recommend"></recommend>
      <featured class="featured" :data="featured" :titleText="$t('home.featured')" :btnText="$t('home.seeAll')"></featured>
      <div class="category-list-wrapper" v-for="(item,index) in categoryList" :key="index">
        <category-book :data="item"></category-book>
      </div>
      <category class="categories" :data="categories"></category>
    </scroll>
  </div>
</template>

<script>
import Scroll from '@/components/common/Scroll.vue'
import SearchBar from '../../components/home/SearchBar.vue'
import FlapCard from '../../components/home/FlapCard.vue'
import { storeHomeMixin } from '../../utils/mixin'
import { home } from '../../api/store'
import GuessYouLike from '../../components/home/GuessYouLike.vue'
import Recommend from '../../components/home/Recommend.vue'
import Featured from '../../components/home/Featured.vue'
import CategoryBook from '../../components/home/CategoryBook.vue'
import Category from '../../components/home/Category.vue'
import { getUsername } from '@/utils/localStorage'

export default {
  mixins: [storeHomeMixin],
  components: {
    SearchBar,
    Scroll,
    FlapCard,
    GuessYouLike,
    Recommend,
    Featured,
    CategoryBook,
    Category
  },
  data () {
    return {
      scrollTop: 94,
      random: null,
      banner: '',
      guessYouLike: null,
      recommend: null,
      featured: null,
      categoryList: null,
      categories: null,
      screenWidth: null
    }
  },
  watch: {
    screenWidth: function (n, o) {
      if (n > 1332) {
        this.$refs.storehome.style.width = '1332px'
      }
    }
  },
  methods: {
    onScroll (offsetY) {
      this.setOffsetY(offsetY)
      if (offsetY > 0) {
        this.scrollTop = 52
      } else {
        this.scrollTop = 94
      }
      this.$refs.scroll.refresh()
    }
  },
  mounted () {
    home(getUsername()).then(response => {
      if (response && response.status === 200) {
        const data = response.data
        const randomIndex = Math.floor(Math.random() * data.random.length)
        this.random = data.random[randomIndex]
        this.banner = data.banner
        this.guessYouLike = data.guessYouLike
        this.recommend = data.recommend
        this.featured = data.featured
        this.categoryList = data.categoryList
        this.categories = data.categories
      }
    })
    // 获取屏幕尺寸
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {
      console.log('高度')
      // 屏幕尺寸变化
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  }
}
</script>

<style lang="scss" scoped>
  .store-home{
    background: white;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    .banner-wrapper{
      width: 100%;
      padding: px2rem(10);
      box-sizing: border-box;
      .banner-img{
        width: 100%;
        height: px2rem(200);
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
    .recommend{
      margin-top: px2rem(20);
    }
    .featured{
      margin-top: px2rem(20);
    }
    .category-list-wrapper{
      margin-top: px2rem(20);
    }
    .categories{
      margin-top: px2rem(20);
    }
  }
</style>
